$(function(){
	$(".allclassify_01").css({"display":"none"})
	$(".allclassify").mouseover(function(){
		$(".allclassify_01").css({"display":"block"})	
	})
	$(".allclassify").mouseout(function(){
		$(".allclassify_01").css({"display":"none"})
	})
	
	//json获取数据拼接
	  $.getJSON("../data/list_shop.json",function(res){
	  	//console.log(res)
	  	var str =""
	  	for(var i=0;i<res.length;i++){
	  		str+=`
	  		<div class="shopping_01">
				<div class="bigPicture_box">
					<img class="bigPicture" src="`+res[i].big_img+`"/>
				</div>
				<div class="smallPicture_box">
					<img class="smallPicture" src="`+res[i].small_img[0]+`"  />
				</div>
				<div class="smallPicture_box">
					<img class="smallPicture" src="`+res[i].small_img[1]+`"  />
				</div>
				<div class="price">
					<span style="color: red; font-weight: 700;">`+"￥"+res[i].pric[0]+`</span>&nbsp;&nbsp;
					<span style="color: #515151;"><s>`+"￥"+res[i].pric[1]+`</s></span>
				</div>
				<div class="informations">
					<a href="#">`+res[i].formation+`</a>
				</div>
				<div class="addshopcar" id="`+res[i].id+`" >
					<a href="javascript:;">
						<i class="iconfont">&#xe63a;&nbsp;加入购物车</i>
					</a>
				</div>
			</div>
	  		`		
	  	}
	  
	  	$(".list_shop_main").append(str)
	  
	  	//小图片上大图
	  	//console.log($(".smallPicture"))
	  	for(let i=0 ;i<$(".smallPicture").length;i++){
	  		$(".smallPicture").eq(i).mouseover(function(){
	  			var pic_src=$(".smallPicture").eq(i).attr("src")
	  			//console.log($(".smallPicture").eq(i).parent().siblings(".bigPicture_box").children("img"))
	  			$(".smallPicture").eq(i).parent().siblings(".bigPicture_box").children("img").attr({src:pic_src})
	  		})
	  		
	  	}
	  	
	  	
	})
	  //导航
	  $(".ul_01 li").click(function(){
		$(".ul_01 li").removeClass("sele").eq($(this).index()).addClass("sele");
		
	});
	  
	  //翻页
	  $(".ul_03_i01").click(function(){
		
	  })
	  
	  
	  
	  
	  //点击返回
	  $(window).scroll(function(){
		var st = $(document).scrollTop();
		var h1 =270;
		var h2 =100;
		if(st>h1){
			$(".yincang1").css({"display":"block"})
		}else{
			$(".yincang1").css({"display":"none"})
		}
		
		if(st>h2){
			$(".goTop").css({"display":"block"})
		}else{
			$(".goTop").css({"display":"none"})
		}
		
	})
	  $(".goTop").click(function(){
		$("html,body").animate({"scrollTop": 0});;
	})
	
	
	
	//购物车
	class ShopCar{
		constructor(){
			this.howMany();
		}
		
		load(){
				//加载数据;
				var that = this;
				$.ajax({
					url:"../data/list_shop.json",
					dataType:"json"
				})
				.then(function(res){
					//成功请求到数据了;
					//console.log(res);
					// 一定变成json;
					//res = typeof res == "object" ? res : JSON.parse(res);
					that.res = res;
					//that.rendring();
					that.init();
				},function(a,b){
					//请求数据失败;
					console.warn(b);
				}) //加载数据成功之后调用初始化方法;
			}
		
		init(){
				//绑定事件;
				var that = this;
				$(".list_shop_main").on("click",".addshopcar",function(){
					//console.log(this.id);
					that.storage(this.id);
					that.howMany();
				})
				
				//特效事件;
				$(".sc_right").on("mouseenter",function(){
					that.showCar($(this));										
				})
				$(".sc_right").on("mouseleave",function(){
					$(this).stop().animate({
						right:-220
					})									
				})
			}
		
		storage(id){
				//console.log(id);
				// 在数组和字符串之中转换;
				// 数组 => 修改数据;
				// 字符串 => 放进cookie之中;
				//分成两种情况;
					//1.没有cookie的情况下; => 建立数据结构;
					//2.有cookie 的情况下; => 向结构中插入数据;
				if(!$.cookie("goods")){
					//不存在;
					$.cookie("goods",'[{"id":'+id+',"num":1}]');
				}else{
					//存在;
					//变成数组 => 操作cookie;
					var cookie = $.cookie("goods");
					var cookieArr = JSON.parse(cookie);
					console.log(cookie)
					var same = false;
					for(var i = 0 ; i < cookieArr.length ; i++){
						if(cookieArr[i].id == id){ //存在当前的商品;
							cookieArr[i].num++;
							same = true;
							break;
						}
					}
					if(same == false){
						var obj = {
							id:id,
							num:1
						};
						cookieArr.push(obj);
					}
					//变成字符串 => 存进cookie;
					cookie = JSON.stringify(cookieArr);
					$.cookie("goods",cookie);
				}

				//console.log($.cookie("goods"))
			}
		
		howMany(){

				if($.cookie("goods")){
					var aCookie = JSON.parse($.cookie("goods"));
					var res = 0;
					for(var i = 0 ; i < aCookie.length ; i++){
						res += aCookie[i].num;
					}	
					$(".sc_num").html(res);	
					$(".sc_num1").html(res);
					return res;
				}
			}
		showCar(obj){
				obj.stop()
				.animate({
					right:0
				})
				if($.cookie("goods")){
					var aCookie = JSON.parse($.cookie("goods"));
					var html = "";
					for(var i = 0 ; i < aCookie.length ; i++){
						html += `
								<li>
									<img src="`+this.res[aCookie[i].id].big_img+`"> 
									<span>商品数量:${aCookie[i].num}</span>
								</li>
							`
					}
					$(".right_list").html(html)
				}		
			}
		
		
	}
	
	var shopcar = new ShopCar();

		shopcar.load();
	

	
})
